<template>
  <el-row>
    <el-col :span="4">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    </el-col>
    <el-col :span="20">
      <el-card class="box-card" :height="viewHeight">
        <div slot="header" class="clearfix">
          <span>网络设备监控</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <jtopo :height="viewHeight" :width="viewWidth" :nodes="nodes" />
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
import store from '@/store'
import jtopo from '@/components/jtopo'
export default {
  components: {
    jtopo
  },
  data() {
  	return {
      nodes: {
        'version': '0.4.8',
        'wheelZoom': 0.95,
        'id': 'ST172.19.105.52015100809430700001',
        'childs': [
          {
            'elementType': 'scene',
            'id': 'S172.19.105.52015100809430700002',
            'translateX': 133.5,
            'translateY': -43,
            'scaleX': 1,
            'scaleY': 1,
            'childs': [
              {
                'elementType': 'node',
                'id': '',
                'x': 290.5,
                'y': 90,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '36c81edc-99db-4939-a9d7-fc54a6c0c9b5',
                'nodeType': 'VE',
                'nodeParams': '',
                'nodeImage': 'icon_ap.png',
                'text': '路由器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 290.5,
                'y': 171,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '378dc108-20d2-4c67-84ee-b3aa9eb0e0b1',
                'nodeType': 'VE',
                'nodeParams': '',
                'nodeImage': 'icon_core_switch.png',
                'text': '核心交换机',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 290.5,
                'y': 233,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '2df2c649-b850-4b96-93f4-62a370d1e4bf',
                'nodeType': 'VM',
                'nodeParams': '',
                'nodeImage': 'icon_firewall.png',
                'text': '防火墙',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 395.5,
                'y': 233,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '619cc0cf-684f-4b10-9cc7-c873f6839378',
                'nodeType': 'VM',
                'nodeParams': '',
                'nodeImage': 'icon_waf.png',
                'text': 'WAF',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 156.5,
                'y': 389,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '453ec581-13f2-4afb-8b9f-278a564e7a11',
                'nodeType': 'VE',
                'nodeParams': '',
                'nodeImage': 'icon_access_switch.png',
                'text': '接入层交换机',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 39.5,
                'y': 501,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '65f7947f-5fc4-49ab-b0df-d34d20ff3aed',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 156.5,
                'y': 501,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': 'f46e103c-8091-43d5-8d91-b6ffdd622e24',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 272.5,
                'y': 501,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': 'fea97fc6-f3ac-4e97-8e3c-6d19dbfc7256',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 379.5,
                'y': 501,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '359d0414-e18c-45d3-9606-c1627790be94',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 498.5,
                'y': 501,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': 'bebe5fe2-ac00-4528-85f3-fe5a59f05b61',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 635.5,
                'y': 501,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': 'fa7c0625-5919-417e-b287-e9a3faf7efee',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 53.5,
                'y': 296,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '3ee97281-5f18-40ca-84a3-1e9a210728c5',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 161.5,
                'y': 296,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '617d0d32-a5a1-45a6-a42d-daba24bd0ebd',
                'nodeType': 'PM',
                'nodeParams': '',
                'nodeImage': 'icon_server.png',
                'text': '服务器',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'node',
                'id': '',
                'x': 498.5,
                'y': 389,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 3,
                'nodeId': '60bc82ab-8e2c-406d-9580-da512ef5e1ec',
                'nodeType': 'VE',
                'nodeParams': '',
                'nodeImage': 'icon_access_switch.png',
                'text': '接入层交换机',
                'textPosition': 'Bottom_Center',
                'layout': ''
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '36c81edc-99db-4939-a9d7-fc54a6c0c9b5',
                'nodeDst': '378dc108-20d2-4c67-84ee-b3aa9eb0e0b1',
                'lineType': 'line',
                'text': '',
                'linkParams': ''
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '378dc108-20d2-4c67-84ee-b3aa9eb0e0b1',
                'nodeDst': '2df2c649-b850-4b96-93f4-62a370d1e4bf',
                'lineType': 'line',
                'text': '',
                'linkParams': ''
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '2df2c649-b850-4b96-93f4-62a370d1e4bf',
                'nodeDst': '619cc0cf-684f-4b10-9cc7-c873f6839378',
                'lineType': 'line',
                'text': '',
                'linkParams': ''
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '2df2c649-b850-4b96-93f4-62a370d1e4bf',
                'nodeDst': '617d0d32-a5a1-45a6-a42d-daba24bd0ebd',
                'lineType': 'foldLine',
                'text': '',
                'linkParams': '',
                'direction': 'horizontal'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '2df2c649-b850-4b96-93f4-62a370d1e4bf',
                'nodeDst': '3ee97281-5f18-40ca-84a3-1e9a210728c5',
                'lineType': 'foldLine',
                'text': '',
                'linkParams': '',
                'direction': 'horizontal'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '619cc0cf-684f-4b10-9cc7-c873f6839378',
                'nodeDst': '60bc82ab-8e2c-406d-9580-da512ef5e1ec',
                'lineType': 'foldLine',
                'text': '',
                'linkParams': '',
                'direction': 'horizontal'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '2df2c649-b850-4b96-93f4-62a370d1e4bf',
                'nodeDst': '453ec581-13f2-4afb-8b9f-278a564e7a11',
                'lineType': 'foldLine',
                'text': '',
                'linkParams': '',
                'direction': 'vertical'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '453ec581-13f2-4afb-8b9f-278a564e7a11',
                'nodeDst': 'f46e103c-8091-43d5-8d91-b6ffdd622e24',
                'lineType': 'line',
                'text': '',
                'linkParams': ''
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '453ec581-13f2-4afb-8b9f-278a564e7a11',
                'nodeDst': '65f7947f-5fc4-49ab-b0df-d34d20ff3aed',
                'lineType': 'flexLine',
                'text': '',
                'linkParams': '',
                'direction': 'vertical'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '453ec581-13f2-4afb-8b9f-278a564e7a11',
                'nodeDst': 'fea97fc6-f3ac-4e97-8e3c-6d19dbfc7256',
                'lineType': 'flexLine',
                'text': '',
                'linkParams': '',
                'direction': 'vertical'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '60bc82ab-8e2c-406d-9580-da512ef5e1ec',
                'nodeDst': '359d0414-e18c-45d3-9606-c1627790be94',
                'lineType': 'flexLine',
                'text': '',
                'linkParams': '',
                'direction': 'vertical'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '60bc82ab-8e2c-406d-9580-da512ef5e1ec',
                'nodeDst': 'fa7c0625-5919-417e-b287-e9a3faf7efee',
                'lineType': 'flexLine',
                'text': '',
                'linkParams': '',
                'direction': 'vertical'
              },
              {
                'elementType': 'link',
                'id': '',
                'x': 0,
                'y': 0,
                'width': 32,
                'height': 32,
                'visible': true,
                'rotate': 0,
                'scaleX': 1,
                'scaleY': 1,
                'zIndex': 2,
                'nodeSrc': '60bc82ab-8e2c-406d-9580-da512ef5e1ec',
                'nodeDst': 'bebe5fe2-ac00-4528-85f3-fe5a59f05b61',
                'lineType': 'line',
                'text': '',
                'linkParams': ''
              }
            ]
          }
        ]
      },

  		viewHeight: store.getters.clientHeight - 210,
  		viewWidth: 1200,
  		data: [{
  			label: 'F117-机房',
  			children: [{
  				label: '路由器',
  				children: [{
  					id: 'router-01',
  					label: '路由器-1'
  				}, {
  					id: 'router-02',
  					label: '路由器-2'
  				}, {
  					id: 'router-03',
  					label: '路由器-3'
  				}, {
  					id: 'router-04',
  					label: '路由器-4'
  				}, {
  					id: 'router-05',
  					label: '路由器-5'
  				}, {
  					id: 'router-06',
  					label: '路由器-6'
  				}, {
  					id: 'router-07',
  					label: '路由器-7'
  				}, {
  					id: 'router-08',
  					label: '路由器-8'
  				}, {
  					id: 'router-09',
  					label: '路由器-9'
  				}, {
  					id: 'router-10',
  					label: '路由器-10'
  				}]
  			}]
  		}]
  	}
  }
}
</script>
